<template>
    <view class="container">
        <!-- 用户信息卡片 -->
        <view class="user-card">
            <view class="user-info">
                <image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'"></image>
                <view class="info">
                    <view class="nickname">{{ userInfo.nickname || '未登录' }}</view>
                    <view class="phone">{{ userInfo.phone || '点击登录' }}</view>
                </view>
            </view>
        </view>

        <!-- 我的钱包 -->
        <view class="wallet-card">
            <view class="balance">
                <text class="label">我的余额</text>
                <text class="amount">￥{{ userInfo.balance || '0.00' }}</text>
            </view>
            <view class="actions">
                <view class="action-btn" @tap="navigateTo('/pages/wallet/recharge')">充值</view>
                <view class="action-btn" @tap="navigateTo('/pages/wallet/withdraw')">提现</view>
            </view>
        </view>

        <!-- 功能列表 -->
        <view class="menu-list">
            <view class="menu-group">
                <view class="menu-item" @tap="navigateTo('/pages/mine/profile')">
                    <image class="icon" src="/static/images/mine/profile.png"></image>
                    <text class="title">个人资料</text>
                    <view class="arrow"></view>
                </view>
                <view class="menu-item" @tap="navigateTo('/pages/wallet/record')">
                    <image class="icon" src="/static/images/mine/wallet.png"></image>
                    <text class="title">交易记录</text>
                    <view class="arrow"></view>
                </view>
            </view>

            <view class="menu-group">
                <view class="menu-item" @tap="navigateTo('/pages/mine/about')">
                    <image class="icon" src="/static/images/mine/about.png"></image>
                    <text class="title">关于我们</text>
                    <view class="arrow"></view>
                </view>
                <view class="menu-item" @tap="navigateTo('/pages/mine/feedback')">
                    <image class="icon" src="/static/images/mine/feedback.png"></image>
                    <text class="title">意见反馈</text>
                    <view class="arrow"></view>
                </view>
                <view class="menu-item" @tap="navigateTo('/pages/mine/settings')">
                    <image class="icon" src="/static/images/mine/settings.png"></image>
                    <text class="title">设置</text>
                    <view class="arrow"></view>
                </view>
            </view>

            <!-- 客服电话 -->
            <view class="menu-group">
                <view class="menu-item" @tap="callService">
                    <image class="icon" src="/static/images/mine/service.png"></image>
                    <text class="title">客服电话</text>
                    <text class="value">400-888-8888</text>
                    <view class="arrow"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getUserInfo } from '@/api/user'

export default {
    data() {
        return {
            userInfo: {}
        }
    },
    onShow() {
        this.getUserInfo()
    },
    methods: {
        // 获取用户信息
        async getUserInfo() {
            try {
                const res = await getUserInfo()
                this.userInfo = res
            } catch (error) {
                console.error('获取用户信息失败', error)
            }
        },
        
        // 页面导航
        navigateTo(url) {
            uni.navigateTo({ url })
        },
        
        // 拨打客服电话
        callService() {
            uni.makePhoneCall({
                phoneNumber: '400-888-8888'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 40rpx;
    
    .user-card {
        background-color: #07c160;
        padding: 40rpx 30rpx;
        
        .user-info {
            display: flex;
            align-items: center;
            
            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 60rpx;
                border: 4rpx solid rgba(255,255,255,0.2);
            }
            
            .info {
                margin-left: 20rpx;
                color: #fff;
                
                .nickname {
                    font-size: 36rpx;
                    font-weight: bold;
                    margin-bottom: 10rpx;
                }
                
                .phone {
                    font-size: 28rpx;
                    opacity: 0.9;
                }
            }
        }
    }
    
    .wallet-card {
        margin: 20rpx;
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        
        .balance {
            margin-bottom: 30rpx;
            
            .label {
                font-size: 28rpx;
                color: #666;
            }
            
            .amount {
                display: block;
                font-size: 48rpx;
                font-weight: bold;
                color: #333;
                margin-top: 10rpx;
            }
        }
        
        .actions {
            display: flex;
            gap: 20rpx;
            
            .action-btn {
                flex: 1;
                height: 80rpx;
                line-height: 80rpx;
                text-align: center;
                background: #f5f5f5;
                border-radius: 40rpx;
                font-size: 28rpx;
                color: #333;
            }
        }
    }
    
    .menu-list {
        margin: 20rpx;
        
        .menu-group {
            background-color: #fff;
            border-radius: 12rpx;
            margin-bottom: 20rpx;
            
            .menu-item {
                display: flex;
                align-items: center;
                padding: 30rpx;
                position: relative;
                
                &:not(:last-child)::after {
                    content: '';
                    position: absolute;
                    left: 30rpx;
                    right: 30rpx;
                    bottom: 0;
                    height: 1rpx;
                    background-color: #eee;
                }
                
                .icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 20rpx;
                }
                
                .title {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333;
                }
                
                .value {
                    font-size: 28rpx;
                    color: #999;
                    margin-right: 10rpx;
                }
                
                .arrow {
                    width: 16rpx;
                    height: 16rpx;
                    border-top: 4rpx solid #ccc;
                    border-right: 4rpx solid #ccc;
                    transform: rotate(45deg);
                }
            }
        }
    }
}
</style> 